<template>
	<view class="content" :style="{
		'padding-top':height+'px',
	}">
		<view :style="{
			'height':statusBarHeight+'px' ,
			'background':'#fff'
		}">

		</view>
		<view style="position: fixed;width: 100%;z-index: 9999;" :style="{
			'height':statusBarHeight+'px' ,
			'background':'#fff',
			'top':0,
			
		}">

		</view>
		<view class="head" :style="{
			'top':statusBarHeight+'px',
			'background':'#fff'
		}">
			<view class="head_left">
				<u-icon name="arrow-left" color="#444444" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">{{title}}</view>
		</view>

		<view class="box">
			<u--form labelPosition="top" labelWidth="280rpx" :model="model1" :rules="rules" ref="uForm">
				<!-- <u-form-item label="星球标题" required prop="userInfo.title" ref="item1">
					<u--input v-model="model1.userInfo.title" border="surround" :customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}" placeholder="请输入标题"></u--input>
				</u-form-item> -->
				<u-form-item label="星球头像" required prop="userInfo.url" ref="item5">
					<view class="props">
						<view class="props_text">
							象征星球的LOGO或代表该星球的图片
						</view>
						<view class="props_up">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
								:maxCount="1">
								<image style="width: 180rpx;height: 180rpx;" src="@/static/images/icon_sctp_logo.png"
									mode=""></image>
							</u-upload>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="星球名称" required prop="userInfo.name" ref="item6">
					<view class="props">
						<view class="props_text">
							星球的名字（如公司注册名 唯一性）
						</view>
						<view class="props_up">
							<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500"
								v-model="model1.userInfo.name" placeholder="请输入内容" :disabled="disabled"></u--textarea>
						</view>
					</view>

				</u-form-item>

				<u-form-item labelPosition="top" label="创建星球事务" required prop="userInfo.zu" ref="item2">
					<view class="group_label" slot="label">
						<view class="group_label_text">
							创建星球事务
						</view>
						<view class="create_group">
							<image src="@/static/images/icon_cjzb_tianjia.png" mode="" @click="setGroup"></image>
						</view>
					</view>
					<view class="group_box" v-if="model1.userInfo.zu.length">
						<view class="group_item" v-for="(item,index) in model1.userInfo.zu">
							{{item}}
							<u-icon name="close" v-if="index != 0" @click="zuColse(index)"></u-icon>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="星球领域" required prop="userInfo.x_area" ref="item7">
					<view class="props">
						<view class="props_text">
							星球 所属的领域，如摄影，兰花，家庭教育等
						</view>
						<view class="props_up">
							<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500"
								v-model="model1.userInfo.x_area" placeholder="请输入内容"></u--textarea>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="星球宣言" required prop="userInfo.declaration" ref="item8">
					<view class="props">
						<view class="props_text">
							代表星球宗旨的Slogan
						</view>
						<view class="props_up">
							<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500"
								v-model="model1.userInfo.declaration" placeholder="请输入内容"></u--textarea>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="星主姓名" required prop="userInfo.real_name" ref="item10">
					<u--input v-model="model1.userInfo.real_name" border="surround" placeholder="请输入名字" :customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}"></u--input>
				</u-form-item>

				<u-form-item label="舰长手机号/邮箱" required prop="userInfo.user_phone_2" ref="item14">
					<u--input v-model="model1.userInfo.user_phone_2" border="surround" placeholder="请输入手机号"
						:customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}">
						<!-- <view style="width: 90rpx;display: flex;" slot="prefix" @click="handAreaCode">
							{{areaCode}}<u-icon name="arrow-down" color="#ADADAD" size="28rpx"></u-icon>
						</view> -->
					</u--input>
				</u-form-item>

				<u-form-item label="星杖手机号/邮箱" required prop="userInfo.user_phone_1" ref="item14">
					<u--input v-model="model1.userInfo.user_phone_1" border="surround" placeholder="请输入手机号"
						:customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}">
						<!-- <view style="width: 90rpx;display: flex;" slot="prefix" @click="handAreaCode">
							{{areaCode}}<u-icon name="arrow-down" color="#ADADAD" size="28rpx"></u-icon>
						</view> -->
					</u--input>
				</u-form-item>


				<u-form-item label="性别" required prop="userInfo.sex" ref="item11">
					<view style="margin-top: 24rpx;">
						<u-radio-group v-model="model1.userInfo.sex" placement="row" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px',marginRight:'40rpx'}"
								v-for="(item, index) in sexList" :key="index" :label="item.name" :name="item.val">
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>

				<u-form-item label="年龄" required prop="userInfo.age" ref="item12">
					<u--input v-model="model1.userInfo.age" border="surround" type="number" placeholder="请输入年龄"
						:customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}"></u--input>
				</u-form-item>

				<u-form-item label="公司" required prop="userInfo.company" ref="item13">
					<u--input v-model="model1.userInfo.company" border="surround" placeholder="请输入公司名称" :customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}"></u--input>
				</u-form-item>

				<u-form-item label="手机号/邮箱" required prop="userInfo.phone" ref="item14">

					<view class=""
						style="width: 100%;display: flex;border-bottom: 1rpx solid #eee;padding: 24rpx 0;align-items: center;">
						<!-- 	<view class="qianzui" @click="handAreaCode">
								{{areaCode}}<u-icon name="arrow-down" color="#ADADAD" size="28rpx"></u-icon>
							</view> -->

						<u--input v-model="model1.userInfo.phone" placeholder="请输入手机号" :customStyle="{
						'border-radio':'16rpx',
						
					}">
							<!-- <view style="width: 90rpx;display: flex;" slot="prefix" @click="handAreaCode">
							{{areaCode}}<u-icon name="arrow-down" color="#ADADAD" size="28rpx"></u-icon>
						</view> -->
						</u--input>
					</view>
				</u-form-item>

				<u-form-item label="微信号" required prop="userInfo.wechat" ref="item10">
					<u--input v-model="model1.userInfo.wechat" border="surround" placeholder="请输入微信号" :customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}"></u--input>
				</u-form-item>


				<u-form-item label="星球简介" required prop="userInfo.introduce" ref="item3">
					<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500"
						v-model="model1.userInfo.introduce" placeholder="说说看法"></u--textarea>
				</u-form-item>
				<u-form-item label="发言规则" required prop="userInfo.rule" ref="item4">
					<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500" v-model="model1.userInfo.rule"
						placeholder="说说看法"></u--textarea>
				</u-form-item>




				<!-- <u-form-item label="星球架构" required prop="userInfo.architecture" ref="item9">
					<view class="props">
						<view class="props_text">
							星球组织3人架构:1星主，星主下有舰长(组织）；星杖（监察）
						</view>
						<view class="props_up">
							<u--textarea style="margin-top: 16rpx;" :count="true" maxlength="500"
								v-model="model1.userInfo.architecture" placeholder="请输入内容"></u--textarea>
						</view>
					</view>
				</u-form-item> -->


				<!-- <u-form-item label="手机号" required prop="userInfo.phone" ref="item14">
					<u--input v-model="model1.userInfo.phone" border="surround" type="number" placeholder="请输入手机号"
						:customStyle="{
						'border-radio':'16rpx',
						'margin-top':'16rpx'
					}">
						<view style="width: 90rpx;display: flex;" slot="prefix" @click="handAreaCode">
							{{areaCode}}<u-icon name="arrow-down" color="#ADADAD" size="28rpx"></u-icon>
						</view>
					</u--input>
				</u-form-item> -->











				<view class="content_text">
					<view class="content_text_title">
						华胥星球 收到星球 创建通知，会对星球 进行审核 ，工作日审核1-2日（节假日除外），请耐心等待。如超时未审核可联系生生老师（微信号sssylaoshi）
					</view>
					<view class="matter" style="margin-top: 34rpx;">
						<view>
							创建星球注意事项
						</view>
						<view>
							1、星球 名字、宣言勿饱含敏感字符
						</view>
						<view>
							2、星球领域与宣言，勿触犯相关国家法律法规
						</view>
						<view class="">
							3、星主需要有舰主与星杖，3人方可开启星球
						</view>
						<view class="" style="margin-top: 34rpx;">
							审核通过，即可开始星球建设！
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="box_btn" @click="submit">
						提交申请
					</view>
				</view>
			</u--form>
		</view>
		<u-picker :show="show1" :columns="columns" @colse="show1=false" @confirm="confirm"></u-picker>

		<u-popup :show="show" mode="bottom" safeAreaInsetTop @close="show = false" @open="show = true" closeable>
			<view class="box_group">
				<view class="group_title">
					添加星球事务
				</view>
				<view class="group_inp">
					<u--input placeholder="请输入组别名称..." border="none" placeholderStyle="font-size:30rpx;color:#ADADAD;"
						color="#ADADAD" v-model="groupValue" inputAlign="left" @change="changeInput()"></u--input>
				</view>
				<view class="group_btn">
					<view class="group_btn_text" @click="addGroup">
						添加
					</view>
				</view>
			</view>
		</u-popup>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import config from "@/config"; // 配置文件
	import storage from "@/common/storage.js"; // 缓存封装
	import {
		dianhua,
		create,
		Detail,
		edit
	} from '@/common/api/start.js'
	export default {
		data() {
			return {
				title: "创建星球",
				statusBarHeight: 0,
				height: 0,
				show: false,
				show1: false,
				groupValue: '',
				disabled: false,
				model1: {
					userInfo: {
						title: '',
						zu: ['组务'],
						introduce: '',
						rule: '',
						// avatar: '',
						name: '',
						x_area: '',
						declaration: '',
						architecture: '',
						real_name: '',
						sex: 0,
						age: '',
						company: '',
						phone: '',
						wechat: '',
						user_phone_1: '',
						user_phone_2: '',
						url: [],
						file_id: -1,
						id: null
					}
				},
				rules: {
					'userInfo.title': {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					},
					'userInfo.zu': [{
						required: true,
						message: '请填写组别',
					}, {
						validator: (rule, value, callback) => {
							console.log('123123123', this.model1.group.length)
							return this.model1.group.length ? true : false;
						},
						message: '请填写组别',
					}],

					'userInfo.introduce': {
						type: 'string',
						required: true,
						message: '请填写简介',
						trigger: ['blur', 'change']
					},
					'userInfo.rule': {
						type: 'string',
						required: true,
						message: '请发言规则',
						trigger: ['blur', 'change']
					},
					// 'userInfo.url': [{
					// 	required: true,
					// 	message: '请选择头像',
					// 	trigger: ['change', 'blur'],
					// }, {
					// 	validator: (rule, value, callback) => {
					// 		console.log('123123123', this.model1.group.length)
					// 		return true;
					// 	},
					// 	message: '请选择头像',
					// }],
					'userInfo.url': {
						required: true,
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							const t = this.fileList1.length ? true : false;
							console.log('你他你他你他', this.fileList1.length, t);
							return t;
						},
						message: '请上传头像',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
					// 'userInfo.avatar': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请发言规则',
					// 	trigger: ['blur', 'change']
					// },
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					},
					'userInfo.x_area': {
						type: 'string',
						required: true,
						message: '请输入领域',
						trigger: ['blur', 'change']
					},
					'userInfo.declaration': {
						type: 'string',
						required: true,
						message: '请输入宣言',
						trigger: ['blur', 'change']
					},
					'userInfo.architecture': {
						type: 'string',
						required: true,
						message: '请输入架构',
						trigger: ['blur', 'change']
					},
					'userInfo.real_name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						required: true,
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							const t = this.model1.userInfo.sex ? true : false;
							console.log('你他你他你他11', t);
							return t;
						},
						message: '请选择性别',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
					'userInfo.age': {
						type: 'string',
						required: true,
						message: '请选择年龄',
						trigger: ['blur', 'change']
					},
					'userInfo.company': {
						type: 'string',
						required: true,
						message: '请输入公司',
						trigger: ['blur', 'change']
					},
					'userInfo.user_phone_1': {
						type: 'string',
						required: true,
						message: '请输入星杖手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.user_phone_2': {
						type: 'string',
						required: true,
						message: '请输入舰长手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.wechat': {
						type: 'string',
						required: true,
						message: '请输入微信号',
						trigger: ['blur', 'change']
					},

				},
				sexList: [{
					name: '男',
					val: 1
				}, {
					name: '女',
					val: 2
				}, {
					name: '保密',
					val: 3
				}],
				columns: [
					['+86', '+87']
				],
				fileList1: [],
				areaCode: '+86',
				type: '',
				type_id: '',
				id: 0
			}
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度


			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.head').boundingClientRect(data => {
					this.height = data.height;
				}).exec()
			});
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options && options.type) {
				this.type = options.type;
				this.type_id = options.type_id;
			}
			if (options && options.id) {
				this.id = options.id;
				this.title = "编辑星球"
				this.getDetail();
				this.disabled = true
			} else {
				this.title = "创建星球"
				this.disabled = false

			}
			this.getDianhua();
		},
		methods: {
			getDetail() {
				Detail({
					id: this.id
				}).then(res => {
					// this.model1.userInfo.name = res.data.detail.info.name
					let info = res.data.detail.info;

					this.model1.userInfo = {
						title: '',
						zu: info.zu_arr,
						introduce: info.introduce,
						rule: info.rule,
						// avatar: '',
						name: info.name,
						x_area: info.x_area,
						declaration: info.declaration,
						architecture: info.architecture,
						real_name: info.real_name,
						sex: info.sex,
						age: info.age,
						company: info.company,
						phone: info.phone,
						wechat: info.wechat,
						user_phone_1: info.xingzhang.phone,
						user_phone_2: info.jianzhang.phone,
						url: [],
						file_id: info.img_avatar
					}
					this.fileList1 = [{
						url: info.img_avatar_url
					}];
					this.file_id = info.img_avatar;
					console.log('resssss222', res);
				})
			},
			getDianhua() {
				dianhua().then(res => {
					console.log('ressss', res);
					this.columns = [res.data.dianhua];
				})
			},
			zuColse(index) {
				this.model1.userInfo.zu.splice(index, 1);
			},
			handAreaCode() {
				this.show1 = true;
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					console.log('itemmmm', item);
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.external_url
					}))
					this.file_id = result.file_id
					fileListLen++
				}

				console.log('22222', this.fileList1);

			},
			uploadFilePromise(url) {
				let token = storage.get("token");
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.uni_app_web_api_url + '/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"Access-Token": token
						},
						success: (res) => {
							const data = JSON.parse(res.data);
							console.log('resssss', res, data.data.fileInfo);
							setTimeout(() => {
								resolve(data.data.fileInfo)
							}, 1000)
						}
					});
				})
			},
			setGroup() {
				this.show = true;
			},
			changeInput(){
				// this.groupValue = this.groupValue.replace(/\s*/g,"");
				// this.groupValue = this.groupValue.replace(/\s*/g,"")
				let str = this.groupValue.replace(/\s*/g,"")
				this.groupValue = str
				this.$forceUpdate();
				console.log(str)
			},
			addGroup() {
				
				if(this.groupValue == ''){
					uni.$u.toast('请填写组名称');
					return
				}
				this.model1.userInfo.zu.push(this.groupValue);
				this.groupValue = '';
				this.show = false;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			groupChange(e) {
				console.log('eeeee', e);
			},
			confirm(e) {
				this.areaCode = e.value[0].split(' ')[1];
				this.show1 = false;
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					const zu = this.model1.userInfo.zu.join(',');
					let type = this.type ? this.type : null;
					let type_id = this.type_id ? this.type_id : null;
					let obj = {}
					if (type == 5) {
						obj.tushu = this.type_id;
					} else if (type == 6) {
						obj.huodong = this.type_id;
					} else if (type == 4) {
						obj.renwu = this.type_id;
					} else if (type == 10) {
						obj.association_id = this.type_id;
					}
					console.log('this.idddd', this.id, type, obj, type_id);
					if (this.id) {
						edit({
							id: this.id,
							...this.model1.userInfo,
							association_id: 0,
							img_avatar: this.file_id,
							type: this.type || 0,
							zu
						}).then(res => {
							uni.$u.toast('编辑成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						}).catch(err => {
							uni.$u.toast(err);
						})
					} else {
						console.log('ssssssssssss', {
							...this.model1.userInfo,
							association_id: 0,
							img_avatar: this.file_id,
							type: type,
							zu,
							...obj
						})
						create({
							...this.model1.userInfo,
							association_id: 0,
							img_avatar: this.file_id,
							type: this.type || 0,
							zu,
							...obj
						}).then(res => {
							uni.$u.toast('创建成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						}).catch(err => {
							uni.$u.toast(err);
						})
					}

					// uni.$u.toast('校验通过', res);
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;

		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.group_label {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.group_label_text {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #444444;
	}

	.group_box {
		width: 100%;
		display: flex;

		.group_item {
			padding: 8rpx 24rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			display: flex;
			margin-right: 16rpx;
			background: #F7F8FA;
		}
	}

	.create_group {
		width: 104rpx;
		height: 56rpx;
		display: flex;
		flex-direction: row-reverse;

		image {
			width: 104rpx;
			height: 100%;
		}
	}

	.props {
		width: 100%;
		margin-top: 16rpx;

		.props_text {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #ADADAD;
		}

		.props_up {
			margin-top: 24rpx;
		}
	}

	.content_text {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #444444;
		line-height: 42rpx;
		margin-top: 28rpx;
	}

	.btn {
		width: 100%;
		padding: 0 30rpx 50rpx;
		box-sizing: border-box;

		.box_btn {
			width: 100%;
			height: 96rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(360deg, #50B674 0%, #AEDDBD 100%);
			border-radius: 48rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 64rpx;
		}
	}

	.box_group {
		width: 100%;
		height: 576rpx;
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;

		.group_title {
			width: 100%;
			padding: 32rpx 0 56rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
		}

		.group_inp {
			width: 100%;
			height: 80rpx;
			background: #F4F4F4;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.group_btn {
			width: 100%;
			padding: 200rpx 60rpx 46rpx;
			box-sizing: border-box;

			.group_btn_text {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(360deg, #50B674 0%, #AEDDBD 100%);
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 48rpx;
			}
		}
	}

	.qianzui {
		width: 92rpx;
		display: flex;
		align-items: center;
		border-right: 1rpx solid #eee;
		margin-right: 24rpx;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 32rpx !important;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #444444 !important;
	}

	/deep/.u-border {
		border-color: #E5E5E5 !important;
	}
</style>